<template>
  <div ref="echartDom"></div>
</template>

<script setup>
import {defineExpose, defineProps, inject, onMounted, onUnmounted, ref, shallowRef, watch} from "vue";
import {pxToRem} from "@/utils/index";

const props = defineProps({
  barData: {
    type: Object,
    default: () => {
    }
  },
  intervalData: {
    type: Object,
    default: {
      currentIndex: 0
    }
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});

watch(
    () => props?.intervalData?.currentBarIndex,
    (newVal) => {
      if (myChart.value) {
        myChart.value.resize()
      }
    }
)

const echartDom = ref(null);
const myChart = shallowRef(null);
const echarts = inject('echarts');

const initEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    let option = {
      barMaxWidth: pxToRem(11 * props?.dialogData?.fontSizeTimes),
      grid: {
        left: `${props?.dialogData?.fontSizeTimes === 1 ? -16 : -10}%`,
        right: 0,
        bottom: 0,
        top: '10%',
        containLabel: true,
      },
      tooltip: {formatter: formateTooltip},
      xAxis: {
        show: false
      },
      yAxis: {
        type: 'category',
        inverse: true,
        data: props?.barData?.yAxisData,
        boundaryGap: false,
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        axisLine: {
          show: false, // 不显示坐标轴线
        },
        splitLine: {
          show: false // 不显示网格线
        },
        axisLabel: {
          formatter: function (value) {
            // 根据实际情况调整标签长度
            return value.length > 4 ? value.slice(0, 4) + '...' : value;
          },
          color: (params) => {
            return props?.barData?.yAxisData?.[props?.intervalData?.currentBarIndex] === params ? 'white' : '#d1d1d1'
          },
          fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
          interval: 0,
          align: 'left',
          margin: pxToRem(60 * props?.dialogData?.fontSizeTimes),
          overflow: 'truncate'
        },
        triggerEvent: true
      },
      series: [
        {
          data: props?.barData?.seriesData,
          type: 'bar',
          itemStyle: {
            borderRadius: pxToRem(50),
            color: (params) => {
              return props?.intervalData?.currentBarIndex === params.dataIndex ? '#00f9fd' : '#1fb6fd'
            }
          },
          showBackground: true,
          backgroundStyle: {
            color: '#05578a',
            borderRadius: pxToRem(50)
          }
        }
      ],
    }
    myChart.value.on('mouseover', (params)=> {
      if (params.componentType === 'yAxis') {
        yLabel = params.value
        let offsetX = params.event.offsetX + 10
        let offsetY = params.event.offsetY + 10
        myChart.value.setOption({tooltip: {
            formatter: formateTooltip,
            alwaysShowContent: true
          }})
        myChart.value.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: 0,
          position: [offsetX, offsetY]
        })
      }
    })
    myChart.value.on('mouseout', (params)=> {
      if (params.componentType === 'yAxis') {
        yLabel = ''
        myChart.value.setOption({tooltip: {
            formatter: formateTooltip,
            alwaysShowContent: false
          }})
      }
    })
    let yLabel = ''
    function formateTooltip (params) {
      return yLabel
    }
    option && myChart.value.setOption(option, true);
  }
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  initEchart();
};

defineExpose({
  updateChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h147 {
  height: 147px;
}
.dialog-h147 {
  width: 1120px;
  height: 400px;
}
</style>